<template>
  <div class="system-settings">
    <div class="settings-header">
      <h2>系统设置</h2>
      <el-button type="primary" @click="saveSettings" :loading="saving">
        保存设置
      </el-button>
    </div>

    <el-tabs v-model="activeTab" type="border-card">
      <el-tab-pane label="基础设置" name="basic">
        <el-form :model="settings" label-width="120px">
          <el-form-item label="系统名称">
            <el-input v-model="settings.systemName" />
          </el-form-item>
          <el-form-item label="系统描述">
            <el-input v-model="settings.systemDescription" type="textarea" />
          </el-form-item>
        </el-form>
      </el-tab-pane>

      <el-tab-pane label="邮件设置" name="email">
        <el-form :model="emailSettings" label-width="120px">
          <el-form-item label="SMTP服务器">
            <el-input v-model="emailSettings.smtpHost" />
          </el-form-item>
          <el-form-item label="端口">
            <el-input-number v-model="emailSettings.smtpPort" />
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('basic')
const saving = ref(false)

const settings = reactive({
  systemName: 'AI-SOES',
  systemDescription: '智能在线考试系统'
})

const emailSettings = reactive({
  smtpHost: '',
  smtpPort: 587
})

const saveSettings = async () => {
  saving.value = true
  try {
    // TODO: 实现保存设置
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    saving.value = false
  }
}
</script>

<style scoped lang="scss">
.system-settings {
  padding: 20px;

  .settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;

    h2 {
      margin: 0;
      color: #303133;
    }
  }
}
</style>